import { useAppDispatch } from '@/store'
import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { fetchRecommendDataAction } from './store/recommend'
import TopBanner from './c-cpns/top-banner'
import {
  RecommendLeft,
  RecommendRight,
  RecommendSection,
  RecommendWrapper
} from './styled'
import HotRecommend from './c-cpns/hot-recommend'
import NewAblum from './c-cpns/new-ablum'
import HotRanking from './c-cpns/hot-ranking'
import VipCard from './c-cpns/vip-card'
import UserLogin from './c-cpns/user-login'
import SettleSinger from './c-cpns/settle-singer'
import HotAnchor from './c-cpns/hot-anchor'

interface Iprops {
  children?: ReactNode
}

const Recommend: FC<Iprops> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchRecommendDataAction())
  })
  return (
    <RecommendWrapper>
      {/* 轮播图 */}
      <TopBanner></TopBanner>
      <RecommendSection className="content wrap-v2">
        <RecommendLeft className="left">
          <HotRecommend />
          <NewAblum />
          <HotRanking />
        </RecommendLeft>
        <RecommendRight className="right">
          <VipCard />
          <UserLogin />
          <SettleSinger />
          <HotAnchor />
        </RecommendRight>
      </RecommendSection>
    </RecommendWrapper>
  )
}
export default memo(Recommend)
